<template>
  <div>
    <div class="Header">
      <svg class="Header__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1337.97 684.43">
        <path
          class="Header__shape bigSquare"
          fill="#16d5d1"
          d="M546.519 349.271l86.383-56.098 56.097 86.383-86.383 56.098z"
        />
        <path
          class="Header__shape triangle"
          fill="none"
          stroke="#ff4676"
          stroke-width="8"
          d="M372.15 462.17L321 434.58l-4.88 56.16z"
        />
        <circle class="Header__shape bigCircle" fill="#ff4676" cx="1076.52" cy="262.17" r="59" />
        <path
          class="Header__shape littleSquare"
          fill="#ffe430"
          d="M285.523 262.61l12.372-53.59 53.59 12.372-12.372 53.59z"
        />
        <circle
          class="Header__shape hoop"
          fill="none"
          stroke="#ffe430"
          stroke-width="13"
          cx="905.52"
          cy="447.17"
          r="45"
        />
        <circle class="Header__shape littleCircle" fill="#0f1c70" cx="1036.52" cy="203.17" r="27" />
      </svg>
      <h3 class="Header__title" onselectstart="return false">Welcome :)</h3>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
.Header__shape {
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(0.18, 1.17, 0.03, 1.46);
  animation-fill-mode: backwards;
  transform-origin: center;
  // this here is the good stuff
  transform-box: fill-box;
}

.Header {
  position: relative;
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Header__svg {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  will-change: transform;
}
.Header__title {
  font-family: Avenir, Futura, 'Open Sans', 'Gill Sans', 'Helvetica Neue', Ariel, sans-serif;
  font-weight: bold;
  font-size: 8vw;
  margin: 0;
  cursor: default;
}

.bigSquare {
  animation-name: bigSquare;
}
@keyframes bigSquare {
  from {
    transform: translateY(10%) rotate(-80deg) scale(0);
  }
  to {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}
.littleSquare {
  animation-name: littleSquare;
}
@keyframes littleSquare {
  from {
    transform: translate(226%, 183%) rotate(140deg) scale(0);
  }
  to {
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
}
.triangle {
  animation-name: triangle;
}
@keyframes triangle {
  from {
    transform: rotate(-140deg) scale(0);
  }
  to {
    transform: rotate(0deg) scale(1);
  }
}
.hoop {
  animation-name: hoop;
}
@keyframes hoop {
  from {
    transform: translate(-160%, -33%) scale(0);
  }
  to {
    transform: translate(0%, 0%) scale(1);
  }
}
.bigCircle {
  animation-name: bigCircle;
}
@keyframes bigCircle {
  from {
    transform: scale(0) translate(60%, 3%);
  }
  to {
    transform: scale(1) translate(0%, 0%);
  }
}
.littleCircle {
  animation-name: littleCircle;
}
@keyframes littleCircle {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@for $i from 1 to 12 {
  .Header__shape:nth-child(#{$i}) {
    animation-delay: $i * 0.16s;
  }
}
</style>
